
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>品优购-产品详情页</title>
        <link rel="stylesheet" type="text/css" href="../gouwu/styles/base.css" />
		<!-- 引入公共css样式 -->
		<link rel="stylesheet" type="text/css" href="../gouwu/styles/common1.css" />
		<!-- 引入产品详情页css样式 -->
		<link rel="stylesheet" type="text/css" href="../gouwu/styles/detail.css" />
        <link rel="icon" href="./images/logo.ico" />
	</head>
	<body>
		
		<div class="pinyou">
			<ul>
				<a href="./home.html"><li>主&nbsp;页</li></a>
				<a href="./list.html"><li>详情页</li></a>
				<a href="./login.html"><li>登录页</li></a>
				<a href="./register.html"><li>注册页</li></a>
				<a href="./miaosha.html"><li>秒杀页</li></a>
			</ul>
		</div>
		
		<!-- 顶部快捷导航栏 -->
		<div class="topnav-wrapper">
			<div class="topnav w hl-25">
				<!-- 左 -->
				<div class="topnav-left fl">
					<span class="ml-10">品优购欢迎您！<a href="#">请登录</a></span>
					<span class="style-red"><a href="#">免费注册</a></span>
				</div>
				<!-- 右 -->
				<div class="topnav-right fr">
					<span><a href="#">我的订单</a></span><i>|</i>
					<span><a href="#">我的品优购<i class="iconfont">&#xe60b;</i></a></span><i>|</i>
					<span><a href="#">品优购会员</a></span><i>|</i>
					<span><a href="#">企业采购</a></span><i>|</i>
					<span><a href="#">关注品优购<i class="iconfont">&#xe60b;</i></a></span><i>|</i>
					<span><a href="#">客户服务<i class="iconfont">&#xe60b;</i></a></span><i>|</i>
					<span><a href="#">网站导航<i class="iconfont">&#xe60b;</i></a></span>
				</div>
			</div>
		</div>

		<!-- 头部  logo 搜索框 -->
		<div class="hander-wrapper clearfix">
			<div class="hander w">
				<!-- logo -->
				<div class="logo fl">
					<h1><img src="../gouwu/images/logo.png"></h1>
				</div>

				<!-- 购物车 -->
				<div class="shop-car fr pointer">
					<i class="iconfont style-red ">&#xe600;</i>
					<span>我的购物车 ></span>
					<span class="count">80</span>
				</div>

				<!-- 搜索框 -->
				<div class="search-box fl">

					<div class="search">
						<input type="text" name="" id="" value="" placeholder="语言开发" />
						<button type="button">搜索</button>
					</div>

					<div class="serch-title">
						<span class="style-red">优惠券首发</span>
						<span>亿元优惠</span>
						<span>9.9元团购</span>
						<span>每满99减30</span>
						<span>办公用品</span>
						<span>电扇</span>
						<span>通信</span>
					</div>
				</div>


			</div>
		</div>

		<!-- 导航栏 -->
		<div class="nav-wrapper">
			<div class="nav w">
				<ul class="minbar ">
					<li>
						全部商品分类
					</li>
					<li>服装城</li>
					<li>美妆馆</li>
					<li>创智超市</li>
					<li>全球购</li>
					<li>闪购</li>
					<li>团购</li>
					<li>拍卖</li>
					<li>有趣</li>
				</ul>

			</div>
		</div>


		<!-- ----------------开始---------------------- -->
		<div class="main w clearfix">
			<div class="main-l clearfix">
				<p>手机、数码、通讯 <i class="iconfont">&#xe603;</i> 手机 <i class="iconfont">&#xe603;</i> Apple苹果 <i class="iconfont">&#xe603;</i>
					iphone 6S Plus系列</p>
				<div class="shopimg">
					<div class="leftcon" id="left">
						<img src="../gouwu/images/account.png">
						<div class="slide_box" id="box"></div>
					</div>
				</div>
				<div class="shopselect">
					<span id="prev"><i class="iconfont">&#xe606;</i></span>
					<div class="shopimgbox">
						<div class="img-list">
							<div><img src="img/xq-sj.jpg"></div>
							<div><img src="img/iphone02.jpg"></div>
							<div><img src="img/iphone03.jpg"></div>
							<div><img src="img/iphone01.jpg"></div>
							<div><img src="img/xq-sj.jpg"></div>
							<div><img src="img/iphone02.jpg"></div>
						</div>
					</div>
					<span id="next"><i class="iconfont">&#xe603;</i></span>
				</div>

				<script type="text/javascript">
					let prev = document.getElementById("prev"),
					    next = document.getElementById("next"),
					    imgList = document.querySelector('.img-list'),
					    imgLength = document.querySelectorAll('.img-list img').length;
					var shopIndex = 0;

					next.addEventListener('click', function() {
					    shopIndex++;
					    if (shopIndex >= imgLength) {
					        shopIndex = 0;
					    }
					    // console.log(shopIndex)
					    imgList.style.left = shopIndex * -70 + "px";
					})
					prev.addEventListener('click', function() {

					    if (imgList.style.left == "0px") {
					        shopIndex = 0;
					    } else {
					        shopIndex--;
					        // console.log(shopIndex)
					        imgList.style.left = shopIndex * -70 + "px";
					    }

					})
				</script>


				<div class="rightcon" id="right">
					<img src="../gouwu/images/account.png" />
				</div>

				<script type="text/javascript">
					const shopselectImg = document.querySelectorAll('.shopselect img');
					// console.log(shopselectImg)
					const shopImg = document.querySelector('.shopimg img');
					const rightconImg = document.querySelector('.rightcon>img');
					let selsectIndex = 0;
					shopselectImg[selsectIndex].style.border = '1px solid red';

					for (let i = 0; i < shopselectImg.length; i++) {
					    shopselectImg[i].onclick = shopselectImg[i].onmouseover = function() {
					        shopselectImg[selsectIndex].style.border = 'none';
					        shopselectImg[i].style.border = '1px solid red';
					        shopImg.src = this.src;
					        rightconImg.src = this.src;
					        selsectIndex = i;
					    }

					}

					var leftone = document.getElementById('left');
					var rightone = document.getElementById('right');
					var box = document.getElementById('box');
					var rimg = rightone.getElementsByTagName("img")[0];

					function getPosition(e) {
					    var e = e || window.event;
					    var top = e.clientY - leftone.offsetTop - box.offsetHeight / 2;
					    var left = e.clientX - leftone.offsetLeft - box.offsetWidth / 2;

					    var maxtop = leftone.offsetHeight - box.offsetHeight;
					    var maxleft = leftone.offsetWidth - box.offsetWidth;
					    var mintop = 0; //获取小滑块最小纵向移动距离
					    var minleft = 0; //获取小滑块最大纵向移动距离
					    var mvtop; //定义小滑块的纵向移动距离
					    var mvleft; //定义小滑块的横向移动距离
					    // 判断
					    if (top < mintop) {
					        box.style.top = mintop + "px";
					        mvtop = mintop;
					    } else if (top > maxtop) {
					        box.style.top = maxtop + "px";
					        mvtop = maxtop;
					    } else {
					        box.style.top = top + "px";
					        mvtop = top;
					    }
					    if (left < minleft) {
					        box.style.left = minleft + "px";
					        mvleft = minleft
					    } else if (left > maxleft) {
					        box.style.left = maxleft + "px";
					        mvleft = maxleft
					    } else {
					        box.style.left = left + "px";
					        mvleft = left;
					    }
					    rimg.style.top = -mvtop * 2 + "px";
					    rimg.style.left = -mvleft * 2 + "px";
					}



					leftone.onmousemove = function(e) {
					    var e = e || window.event; //判断事件源
					    box.style.display = "block";
					    getPosition(e);
					    rightone.style.display = "block";
					}

					leftone.onmouseleave = function(e) {
					    var e = e || window.event; //判断事件源
					    box.style.display = "none";
					    rightone.style.display = "none";
					}
				</script>



				<p>商品编号：0468256644 <span>分享</span> <span>关注</span> <span>对比</span></p>
			</div>


			<div class="main-r clearfix">
				<h1>Apple iPhone 6s(A1700)64G玫瑰金色 移动通讯电信4G手机</h1>
				<p class="red01">推荐选择下方[移动优惠购]，手机套餐齐搞定，不用换号，每月还有话费返</p>
				<div class="concent">
					<p><span class="title">价 格</span> <span class="price">￥5299.00</span><span class="inform">降价通知</span><span class="fr">累计评价612188</span></p>
					<p><span class="title">促 销</span> <span class="add">加价购</span>
						满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品 详情 》</p>
				</div>

				<div class="page">
					<p><span class="title">支 持</span> 以旧换新，闲置手机回收 4G套餐超值购 礼品购</p>
					<p><span class="title">配送至</span> 北京海淀区 <span>中关</span><i class="iconfont">&#xe60b;</i> 有货 &nbsp;支持 &nbsp; 99元免运费
						&nbsp;|货到付款 &nbsp;|211限时达 &nbsp;&nbsp;<i class="iconfont">&#xe60b;</i></p>
					<p class="tip">由自营发货，并提供售后服务。 11:00前完成下单， 预计<span>今天 08月10日）送达</span></p>
				</div>

				<div class="choose">
					<dl class="choose_color clearfix">
						<dt>选择颜色</dt>
						<dd>
							<a href="javascript:;">金色</a>
							<a href="javascript:;">银色</a>
							<a href="javascript:;">黑色</a>
							<a href="javascript:;">玫瑰金</a>
						</dd>
					</dl>

					<script type="text/javascript">
						window.onload = function() {
						    CurrentDd("choose_color");
						    CurrentDd("choose_version");
						    CurrentDd("choose_size");
						    CurrentDd("choose_type");
						    CurrentDd("choose_type02");

						    function CurrentDd(eleDd) {
						        var eleDd = document.getElementsByClassName(eleDd)[0];
						        let dds = eleDd.querySelectorAll('a'),
						            index = 0;
						        for (let i = 0; i < dds.length; i++) {
						            dds[i].onclick = function() {
						                dds[index].style.border = "none";
						                this.style.border = "1px solid red";
						                index = i;
						            }
						        }
						    };


						}
					</script>

					<dl class="choose_version clearfix">
						<dt>选择版本</dt>
						<dd>
							<a href="javascript:;" class="current">公开版</a>
							<a href="javascript:;">移动4G</a>
						</dd>
					</dl>

					<dl class="choose_size clearfix">
						<dt>选择容量</dt>
						<dd>
							<a href="javascript:;">16GB</a>
							<a href="javascript:;" class="current">64GB</a>
							<a href="javascript:;">128GB</a>
						</dd>
					</dl>
					<dl class="choose_type clearfix">
						<dt>购买方式</dt>
						<dd>
							<a href="javascript:;" class="current">官方标配</a>
							<a href="javascript:;">移动优惠购</a>
							<a href="javascript:;">电信优惠购</a>
						</dd>
					</dl>
					<dl class="choose_type clearfix choose_type02">
						<dt>套&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;装</dt>
						<dd>
							<a href="javascript:;">保护套装</a>
							<a href="javascript:;">充电套装</a>
						</dd>
					</dl>

					<div class="choose_btns clearfix">
						<div class="choose_amount">
							<input type="text" value="1" id="chooseInp">
							<a href="javascript:;" class="add">+</a>
							<a href="javascript:;" class="reduce">-</a>
						</div>
						<script type="text/javascript">
							const add = document.querySelector('.choose_amount .add'),
							    reduce = document.querySelector('.choose_amount .reduce'),
							    chooseInp = document.querySelector('#chooseInp');

							add.onmousedown = function() {
							    let i = 0;
							    mouseTime = setInterval(function() {
							        addValue();
							        i++;
							    }, 200);
							    if (i == 0) {
							        addValue();
							    }
							};


							function addValue() {
							    if (chooseInp.value >= 30) {
							        chooseInp.value = 30
							    } else {
							        chooseInp.value = parseInt(chooseInp.value) + 1;
							    }
							}

							reduce.onmousedown = function() {
							    let i = 0;
							    mouseTime = setInterval(function() {
							        minus();
							        i++
							    }, 200)
							    if (i == 0) {
							        minus();
							    }
							}

							function minus() {
							    if (chooseInp.value <= 1) {
							        chooseInp.value = 1;
							    } else {
							        chooseInp.value = parseInt(chooseInp.value) - 1;
							    }
							}


							reduce.onmouseup = add.onmouseup = function() {
							    clearInterval(mouseTime);
							}
						</script>


						<a href="javascript:;" class="addcar">加入购物车</a>
						<a href="javascript:;" class="arrival_goods">到货通知</a>
					</div>

				</div>
			</div>
		</div>

		<!-- ----------------------------------------------------- -->
		<!-- 产品介绍模块 -->
		<div class="product_detail clearfix w">
			<!-- aside -->
			<div class="aside fl">
				<div class="tab_list">
					<ul>
						<li class="first_tab current">相关分类</li>
						<li class="second_tab">推荐品牌</li>
					</ul>
				</div>

				<div class="tab_con">
					<div class="tab_con_title">
						<ul>
							<li>
								<a href="#">手机</a>
							</li>
							<li>
								<a href="#">手机壳</a>
							</li>
							<li>
								<a href="#">内存卡</a>
							</li>
							<li>
								<a href="#">iphone配件</a>
							</li>
							<li>
								<a href="#">贴膜</a>
							</li>
							<li>
								<a href="#">手机耳机</a>
							</li>
							<li>
								<a href="#">移动电源</a>
							</li>
							<li>
								<a href="#">平板电脑</a>
							</li>
							<li>
								<a href="#">笔记本</a>
							</li>
							<li>
								<a href="#">蓝牙耳机</a>
							</li>
						</ul>
					</div>

					<div class="tab_con_list">
						<ul>
							<li>
								<img src="./images/intro041.png">
								<h5>羽博10000mah 双USB Y7移动充大幅度付付多多多多多</h5>
								<div class="aside_price">￥49</div>
								<a href="#" class="as_addcar">加入购物车</a>
							</li>
							<li>
								<img src="./images/intro041.png">
								<h5>蓝孩 苹果iPhone6S 抗蓝光防爆屏牛的一批</h5>
								<div class="aside_price">￥19</div>
								<a href="#" class="as_addcar">加入购物车</a>
							</li>
							<li>
								<img src="./images/intro041.png">
								<h5>半岛铁壳 移动电源Q1 1500mAh</h5>
								<div class="aside_price">￥29</div>
								<a href="#" class="as_addcar">加入购物车</a>
							</li>
							<li>
								<img src="./images/intro041.png">
								<h5>羽博10000mah 双USB Y7移动充</h5>
								<div class="aside_price">￥49</div>
								<a href="#" class="as_addcar">加入购物车</a>
							</li>
							<li>
								<img src="./images/intro041.png">
								<h5>蓝孩 苹果iPhone6S 抗蓝光防爆屏牛的一批</h5>
								<div class="aside_price">￥19</div>
								<a href="#" class="as_addcar">加入购物车</a>
							</li>
							<li>
								<img src="./images/intro041.png">
								<h5>半岛铁壳 移动电源Q1 1500mAh</h5>
								<div class="aside_price">￥29</div>
								<a href="#" class="as_addcar">加入购物车</a>
							</li>
							<li>
								<img src="./images/intro041.png">
								<h5>半岛铁壳 移动电源Q1 1500mAh</h5>
								<div class="aside_price">￥29</div>
								<a href="#" class="as_addcar">加入购物车</a>
							</li>
							<li>
								<img src="./images/intro041.png">
								<h5>半岛铁壳 移动电源Q1 1500mAh</h5>
								<div class="aside_price">￥29</div>
								<a href="#" class="as_addcar">加入购物车</a>
							</li>
						</ul>
					</div>
				</div>
			</div>

			<!-- deteil -->
			<div class="detail fr">
				<div class="detail_tab_list">
					<ul>
						<li class="current">商品介绍</li>
						<li>规格和包装</li>
						<li>售后保障</li>
						<li>商品评价（19亿+）</li>
						<li>手机社区</li>
					</ul>
				</div>
				<div class="detail_tab_con">
					<div class="item">
						<ul class="item_info">
							<li>分辨率：1920*1080(FHD)</li>
							<li>后置摄像头：1200万像素</li>
							<li>前置摄像头：500万像素</li>
							<li>核数：其他</li>
							<li>频率：以官网信息为准</li>
							<li>品牌：AppleiPhone 6s Plus</li>
							<li>商品编号：1861098</li>
							<li>商品毛重:0.51kg</li>
							<li>商品产地：中国大陆</li>
							<li>热点：指纹识别，Apple Pay, 金属机身，拍照神器</li>
							<li>系统：苹果（IOS）</li>
							<li>像素：1000-1600万</li>
							<li>机身内存：64GB</li>
							<p><a href="#" class="more">查看更多参数</a></p>
							<img src="../gouwu/images/intro041.png">
							<img src="../gouwu/images/intro041.png">
							<img src="../gouwu/images/intro041.png">
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!-- 详情页 结束 -->


		<!-- -----------------------------底部  开始----------------------------------- -->
		<div class="footer-wrapper">
			<div class="footer w clearfix">
				<div class="top clearfix">
					<div>
						<p>正品保障</p>
						<span>正品保障，提供发票</span>
					</div>
					<div>
						<p>急速物流</p>
						<span>急速物流，极速送达</span>
					</div>
					<div>
						<p>无忧售后</p>
						<span>七天无理由退换货</span>
					</div>
					<div>
						<p>特色服务</p>
						<span>私人订制家电套餐</span>
					</div>
					<div>
						<p>帮助中心</p>
						<span>你的购物指南</span>
					</div>
				</div>
				<div class="middle clearfix">
					<dl class="mod_help_item">
						<dt>购物指南</dt>
						<dd><a href="#">购物流程</a></dd>
						<dd><a href="#">会员介绍</a></dd>
						<dd><a href="#">生活旅行/团购</a></dd>
						<dd><a href="#">常见问题</a></dd>
						<dd><a href="#">大家电</a></dd>
						<dd><a href="#">联系客服</a></dd>
					</dl>
					<dl class="mod_help_item ">
						<dt>配送方式</dt>
						<dd><a href="#">上门自提</a></dd>
						<dd><a href="#">211限时达</a></dd>
						<dd><a href="#">送服务查询</a>配</dd>
						<dd><a href="#">配送费收取标准</a></dd>
						<dd><a href="#">海外配送</a></dd>
					</dl>
					<dl class="mod_help_item ">
						<dt>支付方式</dt>
						<dd><a href="#">货到付款</a></dd>
						<dd><a href="#">在线支付</a></dd>
						<dd><a href="#">分期付款</a></dd>
						<dd><a href="#">邮局汇款</a></dd>
						<dd><a href="#">公司转账</a></dd>
					</dl>
					<dl class="mod_help_item ">
						<dt>售后服务</dt>
						<dd><a href="#">售后政策</a></dd>
						<dd><a href="#">价格保护</a></dd>
						<dd><a href="#">退款说明</a></dd>
						<dd><a href="#">返修/退换货</a></dd>
						<dd><a href="#">取消订单</a></dd>
					</dl>
					<dl class="mod_help_item ">
						<dt>特色服务</dt>
						<dd><a href="#">夺宝岛</a></dd>
						<dd><a href="#">DIY装机</a></dd>
						<dd><a href="#">延保服务</a></dd>
						<dd><a href="#">品优购E卡</a></dd>
						<dd><a href="#">品优购通信</a></dd>
					</dl>

					<dl class="mod_help_item mod_help_app">
						<dt>帮助中心</dt>
						<img src="img/wx_cz.jpg" alt="">
						<p>品优购客户端</p>
					</dl>
				</div>
				<div class="bottom">
					<p class="mod_copyright_links">
						<a href="">关于我们</a> |
						<a href="">联系我们</a> |
						<a href="">联系客服</a> |
						<a href="">商家入驻</a> |
						<a href="">营销中心</a> |
						<a href="">手机品优购</a> |
						<a href="">友情链接</a> |
						<a href="">销售联盟</a> |
						<a href="">品优购社区</a> |
						<a href="">品优购公益</a> |
						<a href="">English Site</a> |
						<a href="">Contact U</a>
					</p>
					<p class="mod_copyright_info">
						地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br />
						京ICP备08001421号京公网安备110108007702
					</p>
				</div>
			</div>
		</div>

	</body>
</html>
